import React from 'react';
import { connect } from 'dva';
import styles from './sales.less';
import { color } from '../../../utils/theme'
import classnames from 'classnames'
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'

function Sales({ data }) {
  return (
    <div className={styles.sales}>
      <div className={styles.title}>年度销售额：</div>
      <ResponsiveContainer minHeight={360}>
        <LineChart data={data}>

          <XAxis dataKey="年份" axisLine={{ stroke: color.borderBase, strokeWidth: 1 }} tickLine={true } />
          <YAxis axisLine={true} axisLine={{ stroke: color.borderBase, strokeWidth: 1 }} tickLine={false} />
          <Tooltip/>
          <Legend verticalAlign="top" />

          <CartesianGrid vertical={false} stroke={color.borderBase} strokeDasharray="3 3" />

          <Line type="monotone" dataKey="食品" stroke={color.purple} strokeWidth={3} dot={{ fill: color.purple }} activeDot={{ r: 5, strokeWidth: 0 }} />
          <Line type="monotone" dataKey="衣物" stroke={color.red} strokeWidth={3} dot={{ fill: color.red }} activeDot={{ r: 5, strokeWidth: 0 }} />
          <Line type="monotone" dataKey="电子器件" stroke={color.green} strokeWidth={3} dot={{ fill: color.green }} activeDot={{ r: 5, strokeWidth: 0 }} />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}

Sales.propTypes = {
};

export default connect()(Sales);
